<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <div class="user_helpcpnyent clearfix">
      <!-- 详情信息 -->      
      <ol class="helpCOntent_box clearfix">
        <li class="help_li_list dip ju_al_bet" v-for="(lises,index) in illilist" :key="index" @click="getUtl(lises.url)">
          <span class="help_li_text">{{lises.text}}</span> 
          <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="help_li_img">
        </li>
      </ol>
      <!-- 售后服务 -->
      <ol class="helpCOntent_box helpdetilast clearfix">
        <li class="help_li_list dip ju_al_bet" v-for="(lisyf,index) in illilid" :key="index" @click="getUtl(lisyf.url)">
          <span class="help_li_text">{{lisyf.text}}</span> 
          <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="help_li_img">
        </li>
      </ol>
      <!-- 联系我们 -->
      <section class="help_contact helpdetilast">
        <p class="help_li_list dip ju_al_bet" @click="contact()">
          <span class="help_li_text">联系我们</span> 
          <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="help_li_img">
          <!-- <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="help_li_img"> -->
        </p>
        <section class="Customer_box clearfix" v-show="removenumberconact">
          <hgroup class="Tele_cancel_buc Customer_Tele_box dipW ju_al">
              <span class="Cust_Text dip ju_al">    
                <em>您将拨打易点达客服热线：</em>
                <em class="cust_clr">136-8524-5975</em>
              </span>
              <a  href="tel:136-8524-5975" class="Cust_font cust_clr Cust_clr_font tran_op" :class="{'bg_active':this.BgNUmActive}"  @click="AddNumb()" >拨打</a>
          </hgroup>
          <hgroup class="Tele_cancel_buc Customer_cancel dipW ju_al tran_op" @click="remmovecancel()">
              <span class="Cust_font cust_clr">取消</span>
          </hgroup>
        </section>
      </section>
    </div>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/userContent',
        text:'帮助中心',
      },
      illilist:[
        {
          text:'任务合作说明',
          url:'',
        }
        ,{
          text:'商品说明',
          url:'',
        }
        ,{
          text:'广告投放说明',
          url:'',
        }
      ],
      illilid:[
        {
          text:'支付提现规则',
          url:'',
        }
        ,{
          text:'售后服务',
          url:'',
        }
        ,{
          text:'创意师说明',
          url:'',
        }
      ],
      BgNUmActive:false,//点击状态
      removenumberconact:false, //隐藏
    }
  }
  ,methods:{
    getUtl(url){
      console.log(url)
    },
    contact(){ //联系我们   
      this.removenumberconact = !this.removenumberconact
      this.BgNUmActive = false;    
    },
    remmovecancel(){
      this.removenumberconact = false
      this.BgNUmActive =false;      
    },
    AddNumb(){
      this.BgNUmActive = true;
    }
  }
  ,components:{Nav} //引入组件
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  position: fixed;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color: #DEDEDE;
  font-size: .24rem;
} 
.user_helpcpnyent{
  margin-top:1rem;
  width: 100%;
  height: 100%;
  position: relative;
}
.helpCOntent_box{
  width: 100%;
  background: transparent;
}
.help_li_list{
  width: 100%;
  background: #fff;
  height: 1.06rem;
  padding:0rem .4rem;
  border-bottom:.02rem solid #f2f2f2;
  .help_li_text{
    font-size: .24rem;
    color:#333;
    font-weight: 600;
  }
  .help_li_img{
    width: 0.15rem;
    height: 0.3rem;
    margin-right: .2rem;
  }

}
.helpdetilast{
  margin-top:.1rem;
}
.help_contact{
  width: 100%;
  .Customer_box{
    width: 100%;
    padding:.2rem;
  }
  .Tele_cancel_buc{
    width: 100%;
    background: #fff;
    .Cust_Text{
      height: 0.82rem;
      width: 100%;
      border-bottom:.02rem solid #f2f2f2;
      font-size: .24rem;
      color:#666;
      font-weight: 600;
      font-family: "Microsoft YaHei";
    }
    .cust_clr{
      color:#FF7200;
    }
    .Cust_font{
      font-size: .36rem;
    }
    .Cust_clr_font{
      height: .98rem;
      width: 100%;
      text-align: center;
      line-height: .98rem;
    }
  }
  .Customer_Tele_box{
    height: 1.8rem;
    margin-bottom:.2rem;
    padding:0rem .2rem;    
  }
  .Customer_cancel{
    height: 1rem;
  }
  .bg_active{
    background: #e5e5e5;
  }
}

</style>
